<!-- ‘账号列表’ 添加分组-->
<template>
  <ele-pro-table
    ref="table"
    size="mini"
    :columns="columns"
    :datasource="datasource"
    :selection.sync="selection"
    :need-page="true"
    :hideOnSinglePage="false"
  >
    <!--头部按钮-->
    <template v-slot:toolbar>
      <div class="btn-class">
        <el-button type="primary" size="small" @click="addGroups">
          添加分组
        </el-button>
        <el-button type="danger" size="small" @click="delMoreGroup">
          删除
        </el-button>
      </div>
    </template>
    <!--IP属地插槽-->
    <template v-slot:ipLocation="{ row }">
      <!--      1.抖音h5 2.抖音无痕 3.抖音代员工 4.快手（不能跳转授权链接，只限抖音）-->
      <div class="ip-bj" v-if="row.groupType==2">{{ row.ipLocation }}</div>
      <div v-else>--</div>
    </template>
    <!--操作-->
    <template v-slot:action="{ row }">
      <div class="flex-around">
        <el-link
          type="primary"
          :underline="false"
          @click.stop="edit(row)"
        >
          编辑
        </el-link>
        <el-link
          type="primary"
          :underline="false"
          @click.stop="authorizationLink(row)"
        >
          授权链接
        </el-link>
        <el-link
          type="danger"
          :underline="false"
          @click.stop="delSingle(row)"
        >
          删除
        </el-link>
      </div>
    </template>
    <!-- 编辑抽屉 -->
    <!-- :direction="direction" -->
    <el-drawer
      title="编辑"
      size="60%"
      :visible.sync="showEdit">
      <!--标题-->
      <el-form
        :hide-required-asterisk="true"
        ref="form"
        :model="form"
        :rules="rules"
        label-width="74px"
        @keyup.enter.native="submit"
        @submit.native.prevent>
        <el-row :gutter="15" class="display m25">
          <el-col :span="12">
            <el-form-item label="分组名称" class="m-left20">
              <el-input
                @input="inputClick"
                v-model="editGroupName"
                placeholder="请输入分组名称"
                clearable
              >
                <el-button slot="append" :class="editGroupName!=current.groupName ? 'slot-btn' : 'slot-btn-none'" :disabled="editGroupName==current.groupName" @click="updateGroups" :loading="loading">确定修改</el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <!--ip属地只有cookie有 -->
          <el-col :span="12" class="m-right20" v-if="groupForm.groupType == 2">
            <el-form-item label="IP属地">
              <el-select
                disabled
                v-model="current.ipLocation"
                placeholder="请选择IP属地"
                class="ele-block"
                clearable
                @change="ipChange"
              >
                <div v-for="(i,j) in areaRegion" :key="j">
                  <el-option :label="i.areaName" :value="j" />
                </div>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="flex">


        <div class="flex-align-center width60">
          <div class="flex-column numberCount">
            <span>曝光量</span>
            <div>{{playCount}}</div>
          </div>
          <div class="flex-column numberCount">
            <span>点赞数</span>
            <div>{{diggCount}}</div>
          </div>
          <div class="flex-column numberCount">
            <span>评论数</span>
            <div>{{commentCount}}</div>
          </div>
        </div>
      </div>
      <div class="m-table">
        <!--toolkit：大小，行数，是否全屏展示，不加，则会展示全部（包含刷新）
            toolDefault: 表头背景
            :toolkit="[]"
            -->
        <!--toolbar :是否显示表头工具栏-->
        <ele-pro-table
          ref="table2"
          :toolbar="false"
          size="mini"
          :columns="columns2"
          :datasource="accounts"
          :selection.sync="selectionAccount"
          :need-page="true"
          :hideOnSinglePage="false"
        >
          <!-- 头像列 -->
          <template v-slot:head="{ row }">
            <div style="line-height: 1">
              <el-avatar v-if="row.head" :src="row.head" :size="35" />
            </div>
          </template>
          <!--    预计到期时间-->
          <template v-slot:createTime="{ row }">
            <div class="flex-column" v-if="row.expiresIn || row.refreshExpiresIn">
              <div class="v-icon"  v-if="isEmpower(row)">已授权</div>
              <div class="expired-icon" v-else>已失效</div>
              <!--row.type //  1D音2K手-->
              <!--createTime :授权预计到期时间 -->
              <div>{{row.type==1 ? date(row.createTime,row.expiresIn) : date(row.createTime,row.refreshExpiresIn) }}</div>
            </div>
            <div class="flex" v-else>--</div>
          </template>
          <!--操作-->
          <template v-slot:action="{ row }">
            <el-link
              type="primary"
              :underline="false"
              @click.stop="groupChange(row)"
            >
              换组
            </el-link>
          </template>
        </ele-pro-table>
      </div>
    </el-drawer>
    <!--添加分组弹框-->
    <el-dialog
      title="添加分组"
      :show-close="false"
      :visible.sync="dialogVisible"
      width="430px"
    >
      <el-form
        :hide-required-asterisk="true"
        ref="form"
        :model="form"
        :rules="rules"
        label-width="74px"
        @keyup.enter.native="submit"
        @submit.native.prevent
      >
        <el-form-item label="账号类型" class="flex-align-center" style="margin-bottom: 16px">
          <el-radio-group size="small" v-model="form.groupType" class="flex-align-center" style="margin-left: -74px;" @input="typrChange">
            <!--            1.抖音h5 2.抖音无痕 3.抖音代员工 4.快手-->
            <el-radio :label="1">D音h5</el-radio>
            <el-radio :label="2" v-show="info.toCookieReleased==1">D音cookie</el-radio>
            <el-radio :label="3" v-show="info.toBeReleased==1">代发布到D音</el-radio>
            <el-radio :label="4">K手</el-radio>
            <!--<el-radio :label="3">视频号</el-radio>-->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分组名称" prop="groupName" style="margin-bottom: 16px">
          <el-input
            v-model="form.groupName"
            placeholder="请输入分组名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="IP属地" prop="ipLocation" style="margin-bottom: 0" v-if="form.groupType==2" :rules=" form.groupType != 2 ? [{required:false}] : rules.ipLocation ">
          <el-select
            v-model="form.ipLocation"
            placeholder="请选择IP属地"
            class="ele-block"
            clearable
            @change="ipChange"
          >
            <div v-for="(i,j) in areaRegion" :key="j">
              <el-option :label="i.areaName" :value="j" />
            </div>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary" @click="dialogShow">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 选择分组 -->
    <ele-modal
      width="600px"
      :visible.sync="gruopValue"
      :close-on-click-modal="true"
      custom-class="ele-dialog-form"
      title="选择分组"
    >
      <div class="flex-columns">
        <el-input clearable prefix-icon="el-icon-search" style="width: 240px;margin-bottom: 20px" v-model="initInfo.groupName" placeholder="请输入需要搜索的分组"
                  @change="initGroup()"></el-input>
        <!--groupInput 需是数组-->
        <div class="flex-wrap">
          <el-radio-group v-model="groupChecked" @change="selGroupClick(city)" v-for="city in groupList" :key="city.id">
            <el-radio class="radio-mbtn" style="min-width: 50px;margin-right: 20px;" :label="city.id">{{city.groupName}}</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="btn-all flex">
        <el-button size="small" @click="gruopValue = false">取消</el-button>
        <el-button type="primary" size="small" @click="confirm()">确定</el-button>
      </div>
    </ele-modal>
    <!--    K手/D音 ‘静态’授权二维码-->
    <static-code ref="staticDialog" :type="4"></static-code>
    <!--D音cookie 授权二维码-->
    <cookie-code ref="cookieDialog"></cookie-code>
  </ele-pro-table>
</template>b

<script>
  import {queryGroup, areaList, addGroup, delGroup,updateGroup} from "@/api/matrixManage/groupManage";
  import {
    accountCode,
    accountCookie,
    accountGroupCode,
    accountGroupCookie,
    accountGroupH5, accountH5,
    accountQuery,
    updateAccount
  } from "@/api/matrixManage/accountList";
  import cookieCode from "@/views/matrixManage/accountManage/accountList/components/cookie-code";
  import staticCode from "@/views/matrixManage/accountManage/accountList/components/static-code";
  import seeComment from "@/views/matrixManage/releaseManage/publishList/components/see-comments";
  import {projectjob} from "@/api/creatCenter/piecemeal";
  import {staffPage} from "@/api/staffManage/employeeList";
  import {getEventDetails} from "@/api/releaseManage/tiktok";
  export default {
    components:{staticCode,cookieCode},
    props: {
      // 表格数据
      groupForm:Object
    },
    data() {
      return {
        username:this.$store.state.user.info.username,
        info : localStorage.getItem('indexData') ? JSON.parse(localStorage.getItem('indexData')) : {},

        groupList:[],
        // 是否展示分组弹框
        gruopValue: false,
        ipLocation:'',
        // 当前编辑数据
        current: {},
        editGroupName:'',//编辑页，原分组名称
        // 是否显示编辑弹窗
        showEdit: false,
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center'
          },
          {
            prop: 'groupName',
            label: '分组名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'accountCount',
            label: '用户数量',
            align: 'center',
            showOverflowTooltip: true
          },
          // 修改11
          {
            prop: 'exposureAmount',
            label: '曝光量',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              return cellValue ? cellValue : '0';
            }
          },
          {
            prop: 'upvoteAmount',
            label: '点赞数',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              return cellValue ? cellValue : '0';
            }
          },
          {
            prop: 'commentAmount',
            label: '评论数',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              return cellValue ? cellValue : '0';
            }
          },
          {
            prop: 'ipLocation',
            label: 'IP属地',
            align: 'center',
            slot:'ipLocation',
            showOverflowTooltip: true,
            show:true
          },
          {
            prop: 'createTme',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '操作',
            columnKey: 'action',
            width: 230,
            align: 'center',
            resizable: false,
            slot: 'action',
            hideInSetting: true,
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ],
        // 表格选中数据
        selection: [],
        // 分组用户list
        columns2: [
          {
            prop: 'head',
            label: '头像',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'head'
          },
          {
            prop: 'nickname',
            label: '用户昵称',
            align: 'center',
            showOverflowTooltip: true
          },
          // 修改11
          {
            prop: 'exposureAmount',
            label: '曝光量',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              return cellValue ? cellValue : '0';
            }
          },
          {
            prop: 'upvoteAmount',
            label: '点赞数',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              return cellValue ? cellValue : '0';
            }
          },
          {
            prop: 'commentAmount',
            label: '评论数',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              return cellValue ? cellValue : '0';
            }
          },
          {
            prop: 'createTime',
            label: '授权状态/预计到期时间',
            align: 'center',
            showOverflowTooltip: true,
            slot:'createTime'
          },
          {
            prop: 'authExTime',
            label: 'cookie状态/预计到期时间',
            align: 'center',
            showOverflowTooltip: true,
            show:false
          },
          {
            label: '操作',
            columnKey: 'action',
            align: 'center',
            resizable: false,
            slot: 'action',
            hideInSetting: true,
            showOverflowTooltip: true,
          }
        ],
        selectionAccount:[],
        // IP属地
        areaRegion:[],
        // “添加分组” 弹出框
        dialogVisible:false,
        // 表单提交状态
        loading: false,
        // 表单数据
        form: {
          groupType:1
        },
        // 表单验证规则
        rules: {
          groupName: [
            {
              required: true,
              message: '请输入分组名称',
              trigger: 'blur'
            }
          ],
          ipLocation: [
            {
              required: true,
              message: '请选择IP属地',
              trigger: 'blur'
            }
          ]
        },
        // 分组用户信息
        // accounts:[],
        playCount:0,//曝光量
        diggCount:0,//点赞数
        commentCount:0,//评论数
        groupInput:[],
        groupChecked:[],
        groupInfo:{},

        initInfo:{
          username:this.$store.state.user.info.username,
          limit:10,
          page:1
        },
        //end
      };
    },
    computed: {
      // 计算实付款
      isEmpower() {
        return function(row){			//使用函数返回
          let isEmpower = false;
          // true,已授权 ,为false，则为已失效
          // row.type  1D音2K手
          if(row.type==1){
            isEmpower = new Date(this.msToDate(new Date()).hasTime.replace(/-/g,"\/")) < new Date(this.date(row.createTime,row.expiresIn).replace(/-/g,"\/"))
          }
          if(row.type==2){
            isEmpower = new Date(this.msToDate(new Date()).hasTime.replace(/-/g,"\/")) < new Date(this.date(row.createTime,row.refreshExpiresIn).replace(/-/g,"\/"))
          }
          return isEmpower;
        }
      }
    },
    created(){
      this.init()
    },
    methods: {
      show(){
        console.log('this.groupForm.groupType',this.groupForm.groupType)
        this.columns[6].show= this.groupForm.groupType == 2 ? true : false
        console.log('this.columns[6]',this.columns[6])
      },

      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        console.log(" page, limit, where, order", page, limit, where, order)
        console.log("this.form.isQuery",this.groupForm.isQuery,this.groupForm.groupType )
        /* let parms={
           groupType:this.groupForm.groupType,
          username:this.$store.state.user.info.username
         }*/
        let parms={}
        parms.groupType= this.groupForm.groupType
        parms.username= this.$store.state.user.info.username
        if(this.groupForm.groupName){
          parms.groupName= this.groupForm.groupName
        }
        if(this.groupForm.ipLocation){
          parms.ipLocation= this.groupForm.ipLocation
        }
        if(this.groupForm.startTime){
          parms.startTime= this.groupForm.startTime
          parms.endTime= this.groupForm.endTime
        }
        /* if(this.groupForm.isQuery==false){
           this.$set(parms,'username',this.$store.state.user.info.username)
           this.$set(parms,'groupType',this.groupForm.groupType)
         }
         else{
           parms = this.groupForm
         }*/
        return queryGroup({
          ...where,
          ...order,
          page,
          limit,
          ...parms
        });
      },


      async datasource324({ page, limit, where, order }) {
        console.log("新————表格数据源page, limit, where, order",page, limit, where, order)
        console.log("this.form.isQuery",this.groupForm.isQuery,this.groupForm.groupType )
        let parms={}
        /*parms = this.groupForm.isQuery==false ? this.$set(parms,'groupType',this.groupForm.groupType )
          : parms = this.groupForm*/
        if(this.groupForm.isQuery==false){
          this.$set(parms,'username',this.$store.state.user.info.username)
          this.$set(parms,'groupType',this.groupForm.groupType)
        }
        else{
          parms = this.groupForm
        }
        const result = await queryGroup({ page, limit, ...where, ...order,...parms });
        console.log("新—2222222———表格数据源page, limit, where, order",page, limit, where, order)

        return result;  // 这里返回的数据要包含 list 和 count 两个字段，字段名称可以通过 response 属性配置
      },
      /* 刷新————表格数据源 */
      datasource234({ page, limit, where, order }) {
        console.log("新————表格数据源page, limit, where, order",page, limit, where, order)
        console.log("this.form.isQuery",this.groupForm.isQuery,this.groupForm.groupType )
        let parms={}
        /*parms = this.groupForm.isQuery==false ? this.$set(parms,'groupType',this.groupForm.groupType )
          : parms = this.groupForm*/
        if(this.groupForm.isQuery==false){
          this.$set(parms,'username',this.$store.state.user.info.username)
          this.$set(parms,'groupType',this.groupForm.groupType)
        }
        else{
          parms = this.groupForm
        }
        return queryGroup({ ...where, ...order, page, limit,...parms });
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
      // 初始化分组
      initGroup(type){
        this.initInfo.groupType=type ? type : ''
        if(!this.initInfo.groupType){
          delete this.initInfo.groupType
        }
        if(!this.initInfo.groupName){
          delete this.initInfo.groupName
        }
        queryGroup(this.initInfo)
          .then((data) => {
            this.groupList=data.list
            console.log(' this.groupList--', this.groupList)
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      // 换组
      groupChange(e){
        console.log("e----------",e)
        this.groupChecked=e ? e.groupId : []
        this.groupInfo.id=e.id
        this.initGroup(e.types)
        this.gruopValue = true
        // 清空分组数据
        this.groupInput=[]
      },
      // 选择分组
      selGroupClick(e){
        console.log("选择分组e=========",e,'this.groupInput',this.groupInput)
        // 需修改 暂时只能单选分组
        this.groupInfo.groupId=e.id
        this.groupInfo.groupName=e.groupName
        this.groupInfo.area=e.area
      },
      // 确定分组
      confirm(){
        console.log("this.groupChecked && this.groupInfo.groupId",this.groupChecked, this.groupInfo.groupId)
        if(!this.groupChecked){
          this.$message.error('请先选择分组')
          return
        }
        if(this.groupChecked && !this.groupInfo.groupId){
          this.$message.error('账号已在该分组中')
          return
        }
        console.log("确定分组this.groupInfo====",this.groupInfo)
        let groupList=[]
        groupList.push(this.groupInfo)
        updateAccount(groupList)
          .then((data) => {
            // 查看账户
            let parms = {
              username:this.$store.state.user.info.username,
              limit:1,
              // type:row.groupType, 区分抖音h5，快手等
              page:1,
              groupId:this.current.id // 分组ID
            }
            console.log("parms",parms)

            this.reload2(parms)
            this.gruopValue = false
            this.$message.success('分组成功！');
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      // 账号类型
      typrChange(e){
        console.log('账号类型eeeeeeeeeeee',e)
        // 清空分组
        delete this.form.groupName
        delete this.form.ipLocation
        delete this.form.area
        console.log("this.form", this.form)
      },
      // 分组名称——编辑变化时进入
      inputClick(e){
        console.log('分组名称——编辑变化时进入eee',e,'current.groupName',this.current.groupName,'editGroupName',this.editGroupName)
      },
      // 选择ip属地
      ipChange(e){
        this.form.ipLocation=this.areaRegion[e].areaName
        this.form.area=this.areaRegion[e].areaCode
        console.log('选择ip属地e',e,'this.form',this.form)
      },
      // 关闭授权弹框
      dialogClose(){
        this.dialogVisible = false
      },
      // 添加分组
      dialogShow(){
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.dialogVisible = false
            Object.assign(this.form, {
              username: this.$store.state.user.info.username,
            })
            console.log('this.form223432423', this.form)
            addGroup(this.form)
              .then((data) => {
                // this.$message.success(data.msg)
                this.$message.success('添加成功')
                // 清空分组
                this.form.groupName=''
                this.form.ipLocation=''
                console.log(' 分组管理--', data)
                // 查询分组
                this.reload()
              })
              .catch((e) => {
                this.$message.error(e);
              });
          } else {
            return false
          }
        })
      },
      init(){
        //获取IP属地
        areaList('')
          .then((data) => {
            this.areaRegion=data.data
            console.log(' 获取IP属地--', this.areaRegion)
          })
      },

      // 添加分组
      addGroups(){
        this.dialogVisible=true
      },
      // 删除
      delMoreGroup(){
        if (!this.selection.length) {
          // 请选择需要操作的数据
          this.$message.error('请选择数据');
          return;
        }
        var ids=this.selection.map(item => {
          return item.id
        })
        console.log('删除点击事件his.selection===', this.selection ,'ids',ids)
        this.delGroups(ids)
      },
      // 编辑修改分组名称
      updateGroups(){
        this.loading=true
        updateGroup({
          groupName:this.editGroupName, //分组名称
          id:this.current.id //分组id
        })
          .then((data) => {
            this.$message.success('修改成功!');
            this.current.groupName=this.editGroupName // 赋值，让确定修改置灰
            this.loading=false
            // 刷新分组
            this.reload()
          })
          .catch((e) => {
            this.loading=false
            this.$message.error(e);
          });
      },
      /* 编辑 */
      edit (row) {
        console.log("点击了编辑",row)
        this.current = row;  // 表格的行数据赋值给 current
        this.editGroupName=JSON.parse(JSON.stringify(row.groupName));
        this.showEdit = true;
        this.columns2[6].show=this.groupForm.groupType == 2 ? true : false

        let parms = {
          username:this.$store.state.user.info.username,
          limit:1,
          // type:row.groupType, 区分抖音h5，快手等
          page:1,
          groupId:row.id // 分组ID
        }
        console.log("parms1111111",parms)
        this.reload2(parms)
      },

      reload2(where) {
        this.$nextTick(()=>{
          this.$refs.table2.reload({ page: 1, where: where });
        })

      },
      async accounts({ page, limit, where, order }) {
        if(where.groupId){
          const result = await accountQuery({ ...where, ...order, page, limit });
          console.log('result:', result);
          let list =result.list
          let exposureAmount,upvoteAmount,commentAmount=0
          for(let i=0;i<list.length;i++){
            exposureAmount=list[i].exposureAmount?list[i].exposureAmount:0
            upvoteAmount=list[i].upvoteAmount?list[i].upvoteAmount:0
            commentAmount=list[i].commentAmount?list[i].commentAmount:0
            this.playCount += exposureAmount //曝光量
            this.diggCount += upvoteAmount //点赞数
            this.commentCount += commentAmount //评论数
          }
          return result;  // 这里返回的数据要包含 list 和 count 两个字段，字段名称可以通过 response 属性配置
        }

      },
      // 查询矩阵账号【分页查询】
      query2(row){
        let parms = {
          username:this.$store.state.user.info.username,
          limit:1,
          // type:row.groupType, 区分抖音h5，快手等
          page:1,
          groupId:row.id // 分组ID
        }
        accountQuery(parms)
          .then((data) => {
            this.accounts=data
            let list =data.list
            console.log("this.accounts",this.accounts)
            for(let i=0;i<list.length;i++){
              this.playCount += list[i].playCount //曝光量
              this.diggCount += list[i].diggCount //点赞数
              this.commentCount += list[i].commentCount //评论数
            }
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },

      /* 授权链接 */
      async authorizationLink(form) {
        console.log("授权链接form",form)
        // 编辑弹窗编辑完成后 done 事件回传表单数据，使用 Object.assign 赋值给 current 即可修改表格的行数据
        if(this.current) {
          Object.assign(this.current, form);
        }
        let code=''

        if(this.groupForm.groupType==3 || this.groupForm.groupType==1 || this.groupForm.groupType==2){
          //1.抖音h5 2.抖音无痕 3.抖音代员工 4.快手（不能跳转授权链接，只限抖音）
          // 传值需加groupId
          code = this.groupForm.groupType==2 ? await accountGroupCookie(this.username,form,this.$store.state.user.info.merchantId) : this.groupForm.groupType==1 ? await accountGroupH5(this.username,form,this.$store.state.user.info.merchantId
          ) : await accountGroupCode(this.username,form,this.$store.state.user.info.merchantId)
          console.log("code===============",code,code.data)
          if(this.groupForm.groupType==2){
            this.$refs['cookieDialog'].show()
          }
          else{
            window.open(code.data)
          }
        }
        if(this.groupForm.groupType==4){
          this.$refs['staticDialog'].show(form)
        }
      },
      /* 删除 */
      delSingle(row) {
        let ids=[]
        ids.push(row.id)
        console.log("ids====",ids)
        this.delGroups(ids)
      },
      delGroups(ids){
        this.$confirm('此操作将永久删除该分组, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delGroup({
            ids:ids
          })
            .then((data) => {
              // 查询分组
              this.reload()
              this.$message.success('删除成功!');
            })
            .catch((e) => {
              this.$message.error(e);
            });
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      },
      // date:创建日期 time：授权过期时间（需加）
      date (date,addTime) {
        // 日期或中国标准时间转毫秒数：
        let result = new Date(date).getTime();
        let allDate=result+addTime*1000 // 按秒计算，所以需要*1000（原始毫秒）
        // 预计到期时间计算
        let endtime= this.msToDate(allDate).hasTime
        // 当前时间
        // let time = this.msToDate(new Date()).hasTime;
        // console.log('time22222222222',time)
        // if(endtime<time){
        //   console.log('已过期')
        // }

        // 去除秒数截取最后：的前面数字
        let index = endtime .lastIndexOf(":")
        endtime =endtime .substring(0,index);

        return endtime
        // var st="2009-10-20 14:38:40" 开始时间（大）
        // var et="2009-10-20 15:38:40" 结束时间（小）
        // if(st>et) alert("开始时间必须小于结束时间")
      },
      // 毫秒数或中国标准时间转日期
      msToDate (msec) {
        let datetime = new Date(msec);
        let year = datetime.getFullYear();
        let month = datetime.getMonth();
        let date = datetime.getDate();
        let hour = datetime.getHours();
        let minute = datetime.getMinutes();
        let second = datetime.getSeconds();
        let result1 = year +
          '-' +
          ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
          '-' +
          ((date + 1) < 10 ? '0' + date : date) +
          ' ' +
          ((hour + 1) < 10 ? '0' + hour : hour) +
          ':' +
          ((minute + 1) < 10 ? '0' + minute : minute) +
          ':' +
          ((second + 1) < 10 ? '0' + second : second);

        let result2 = year +
          '-' +
          ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
          '-' +
          ((date + 1) < 10 ? '0' + date : date);

        let result = {
          hasTime: result1,
          withoutTime: result2
        };

        return result;
      }
    }
  };
</script>

<style scoped lang="less">
  /*表格头部按钮*/
  .btn-class{
    margin: 10px 0;
    .el-button{
      padding: 0;
      width: 94px;
      border-radius: 2px;
      height: 33px;
    }
  }
  /*IP属地背景*/
  .ip-bj{
    background: #DDF0FF;
    border-radius: 2px;
    height: 25px;
    line-height: 25px;
    color: #1E6CEB;
    padding:0 8px;
    display: inline-block;
  }
  /*‘编辑’ 抽屉*/
  .m25{
    margin: 25px 0;
  }
  .slot-btn{
    background-color: rgb(24, 144, 255) !important;
    color: rgb(255, 255, 255) !important;
    border-radius: 0 5px 5px 0 !important;
    border: 1px solid rgb(24, 144, 255) !important;
  }
  .slot-btn-none{
    border: 1px solid #ededed !important;
  }
  .numberCount{
    width: calc(100% / 3);
    span{
      color: #757575;
    }
    div{
      margin-top: 11px ;
      color: #1E6CEB;
      font-size: 32px;
    }
  }
  .m-table{
    padding: 17px;
    margin-top: 20px;
    /*已过期/授权*/
    .v-icon ,.expired-icon{
      padding: 1px 7px;
      border-radius: 2px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      /*font-size: 14px;*/
    }
    .v-icon{
      color: #18a058;
      background-color: rgba(24, 160, 88, 0.1);
      border: 1px solid rgba(24, 160, 88, 0.3);
    }
    .expired-icon{
      color: #d03050;
      background-color: rgba(208, 48, 80, 0.08);
      border: 1px solid rgba(208, 48, 80, 0.23);
    }
  }

  .btn-all{
    margin:50px 0 20px
  }
</style>
